<template>
  <div>
    <div class="juzho">
      <div class="logo">
        <div><img src="https://huaban.com/img/logo.svg" alt="" /></div>
        <div>发现</div>
        <div>设计大赛</div>
      </div>
      <div class="inp">
        <div class="xiala">
          <el-dropdown trigger="click" size="mini">
            <span class="el-dropdown-link">
              采集<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>采集</el-dropdown-item>
              <el-dropdown-item>画板</el-dropdown-item>
              <el-dropdown-item>用户</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="sousuo">
          <input type="text" v-model="sousuo" placeholder="搜索你喜欢的" />
        </div>
        <div class="butn"><button class="el-icon-search"></button></div>
      </div>
      <div class="la">
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <button class="el-icon-s-grid"></button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div>
          <button class="dl">登录/注册</button>
        </div>
      </div>
    </div>
    <div
      class="bg"
      style="
        background: url('https://hbimg-other.huabanimg.com/30c045ec1dd6275540a292ec7361f985deeb2cd11641457872bhsXwGId');
      "
    ></div>
    <div class="tie">
      <div>
        <el-radio-group
          v-model="radio1"
          size="small"
          fill="#ccc"
          text-color="#000"
        >
          <el-radio-button label="采集"></el-radio-button>
          <el-radio-button label="画板"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="title">
        <router-link tag="span" to="/zuixin">最新</router-link>
        <router-link tag="span" to="/ui">UI/UX</router-link>
        <router-link tag="span" to="/piman">平面</router-link>
        <router-link tag="span" to="/chahua">插画/漫画</router-link>
        <router-link tag="span" to="/sheyin">摄影</router-link>
        <router-link tag="span" to="/youxi">游戏</router-link>
        <router-link tag="span" to="/doman">动漫</router-link>
        <router-link tag="span" to="/goye">工业设计</router-link>
        <router-link tag="span" to="/janzhu">建筑设计</router-link>
        <router-link tag="span" to="/rnwen">人文艺术</router-link>
        <router-link tag="span" to="/jiaju">家居/家装</router-link>
        <router-link tag="span" to="/nvzhan">女装/搭配</router-link>
        <router-link tag="span" to="/nanshi">男士/风尚</router-link>
        <router-link tag="span" to="/zaoxin">造型/美妆</router-link>
        <router-link tag="span" to="/shogon">手工/布艺</router-link>
        <router-link tag="span" to="/meishi">美食</router-link>
      </div>
      <div class="btn">
        <button class="el-icon-grape"></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Title",
  data() {
    return {
      radio1: "采集",
      sousuo: null,
    };
  },
};
</script>

<style lang="less" scoped>
.juzho {
  width: 1456px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 2%), 0 4px 8px 0 rgb(0 0 0 / 2%);
  border-radius: 2px;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  div {
    padding: 0 10px;
  }
}
.la {
  display: flex;
  align-items: center;
  div {
    padding: 0 10px;
    button {
      border: none;
      background: transparent;
    }
    .dl {
      background: #ec414d;
      padding: 5px 10px;
      color: #fff;
    }
  }
}
.inp {
  width: 960px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 10px;
  background: #ebe6e6;
  .sousuo {
    width: 880px;

    input {
      background-color: transparent;
      background-image: none;
      border-radius: 4px;
      border: none;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }
  .butn {
    button {
      border: none;
      background: transparent;
    }
  }
}
.bg {
  width: 100%;
  height: 60px;
}
.tie {
  width: 1456px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px 20px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 2%), 0 4px 8px 0 rgb(0 0 0 / 2%);
  border-radius: 2px;
  background: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      padding: 10px;
    }
  }
  .btn {
    button {
      border: none;
      background: transparent;
    }
  }
}
</style>